<template>
  <div class="tree-container" @contextmenu.prevent="()=>false">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      <i slot="prefix" class="el-input__icon el-icon-search search"></i>
    </el-input>
    <div class="margin"></div>
    <el-tree
      icon-class="custom"
      :props="defaultProps"
      ref="tree"
      :load="loadNode"
      lazy
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ node }">
        <!-- <el-tooltip effect="dark" placement="top" :content="node.label"> -->
          <div :title="node.label">
            <span>{{ node.label }}</span>
          </div>
        <!-- </el-tooltip> -->
      </div>
    </el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";

@Component
export default class extends Vue {
  defaultProps: Object = {
    children: "children",
    label: "name",
    isLeaf: "isLeaf",
  };

  filterText: string = "";
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);

    if (tree) {
      tree.filter(val);
    }
  }

  private mounted(): void {}
  private destroyed(): void {}
  oldTime: number = 0;
  // 鼠标双击
  handleNodeClick(data: any) {
    let newTime = new Date().getTime();
    let oldTime = this.oldTime;
    if (oldTime) {
      let changeTime = newTime - oldTime;
      if (changeTime < 500) {
        let type = data.type;
        if (type === "video" || type === "point") {
          data.myCj = "sbqj";
          this.$emit("handleNodeClick", data);
        }
      }
    }
    this.oldTime = newTime;
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  //隐藏当前右击事件组件

  // 树图加载
  loadNode(node, resolve) {
    let params: any;
    let myBdzId = "";
    if (node.level > 0) {
      let data = node.data;
      myBdzId = data.myBdzId || "";
      params = {
        id: data.id,
        type: data.type,
      };
    }
    (this as any).$services
      .sbqjtree({ data: params })
      .then((result: any) => {
        let data = result.data || [];
        data.forEach((v) => {
          v.myBdzId = myBdzId;
          if (v.type === "bdz") {
            let id = v.id.split("#");
            id = id[0] || "";
            v.myBdzId = id;
          }
          if (v.type === "point") {
            v.isLeaf = true;
          }
        });
        resolve(data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .margin {
    height: 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
}
</style>
<style lang="scss">
html {
  body {
    .el-tree-node__content:hover {
      background-color: transparent;
    }
  }
}
</style>
